<template>
    <view class="area-container">
        <u-picker confirmColor="#ff0000" :show="modelValue" :columns="columns" @change="handelPicker" @confirm="handelConfirm" @cancel="emit('update:modelValue', false)"></u-picker>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { post } from "@/libs/request"
const props = withDefaults(defineProps<{
    modelValue:boolean
}>(), {
    modelValue: false,
})
const emit = defineEmits(['update:modelValue','confirm'])
const columns = reactive([[],[],[]])
const areaTree = ref<any>([]);
/**
 * 获取区域树形数据
 */
const getAreaTree = ()=>{
    post("area/getTree").then((res:any)=>{
        if(res.errCode==0){
            areaTree.value = res.data;
            if(areaTree.value.length){
                columns[0] = areaTree.value.map((item:any)=>item.areaName)
                columns[1] = areaTree.value[0].children.map((item:any)=>item.areaName)
                columns[2] = areaTree.value[0].children[0].children.map((item:any)=>item.areaName)
            }
        }
    })
}
/**
 * 监听地区选择
 */
const handelPicker = (e:any)=>{
    const {
        columnIndex,
        index,
        indexs,
    } = e;
    if(columnIndex==0){
        columns[1] = areaTree.value[index].children.map((item:any)=>item.areaName)
        columns[2] = areaTree.value[indexs[0]].children[indexs[1]].children.map((item:any)=>item.areaName)
    }
    if(columnIndex==1){
        console.log(columns[2],'--columns[1]');
        columns[2] = areaTree.value[indexs[0]].children[indexs[1]].children.map((item:any)=>item.areaName)
    }
}
/**
 * 点击确认按钮
 */
const handelConfirm = (e:any) => {
    const {indexs} = e;
    e.items = [
        areaTree.value[indexs[0]],
        areaTree.value[indexs[0]]?.children[indexs[1]],
        areaTree.value[indexs[0]]?.children[indexs[1]]?.children[indexs[2]],
    ]
    emit('confirm', e)
    emit('update:modelValue', false)
};
onMounted(() => {
    getAreaTree();
})
</script>

<style scoped>

</style>